<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ES6 常用知识  | 一名前端er的学习笔记</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/xiaoliantongxue/img/favicon.ico">
    <link rel="stylesheet" href="/xiaoliantongxue/css/style.css">
    <script charset="utf-8" src="/xiaoliantongxue/js/custom.js"></script>
    <meta name="description" content="没有奇迹，只有你努力的轨迹；没有运气，只有你坚持的勇气。">
    
    <link rel="preload" href="/xiaoliantongxue/assets/css/0.styles.95d100bd.css" as="style"><link rel="preload" href="/xiaoliantongxue/assets/js/app.ebd9f252.js" as="script"><link rel="preload" href="/xiaoliantongxue/assets/js/4.d19b4706.js" as="script"><link rel="preload" href="/xiaoliantongxue/assets/js/1.7b0744f8.js" as="script"><link rel="preload" href="/xiaoliantongxue/assets/js/18.0721048c.js" as="script"><link rel="prefetch" href="/xiaoliantongxue/assets/js/10.7f85c175.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/11.23178731.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/12.3a600697.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/13.d26dba6e.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/14.ba028ae5.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/15.59927da5.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/16.c77c944a.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/17.33ec3468.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/19.94ad9b06.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/20.5990745a.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/21.1373c18d.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/22.5e7f78de.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/23.6fe33379.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/24.a3d500e5.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/25.e79df9da.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/26.b99b96b7.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/27.d5410a58.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/5.b89681ba.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/6.c8982d95.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/7.71bebb6e.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/8.35bba38f.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/9.b5788ac6.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/vendors~flowchart.dbbf4bfe.js">
    <link rel="stylesheet" href="/xiaoliantongxue/assets/css/0.styles.95d100bd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div><div class="theme-container" data-v-4698c43e><div data-v-4698c43e><div id="loader-wrapper" class="loading-wrapper" data-v-1c4f0192 data-v-4698c43e data-v-4698c43e><div class="loader-main" data-v-1c4f0192><div data-v-1c4f0192></div><div data-v-1c4f0192></div><div data-v-1c4f0192></div><div data-v-1c4f0192></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-6cbeab0a data-v-4698c43e data-v-4698c43e><h3 class="title" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a>一名前端er的学习笔记</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><input type="password" value="" data-v-6cbeab0a> <span data-v-6cbeab0a>Konck! Knock!</span> <button data-v-6cbeab0a>OK</button></label> <div class="footer" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><span data-v-6cbeab0a><i class="iconfont reco-theme" data-v-6cbeab0a></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-6cbeab0a>vuePress-theme-reco</a></span> <span data-v-6cbeab0a><i class="iconfont reco-copyright" data-v-6cbeab0a></i> <a data-v-6cbeab0a><span data-v-6cbeab0a>小连同学</span>
            
          <span data-v-6cbeab0a>2022 - </span>
          2023
        </a></span></div></div> <div class="hide" data-v-4698c43e><header class="navbar" data-v-4698c43e><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/xiaoliantongxue/" class="home-link router-link-active"><!----> <span class="site-name">一名前端er的学习笔记</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/xiaoliantongxue/resources/编程指南/" class="nav-link"><i class="iconfont reco-eye"></i>
  编程指南
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>
      前端学习
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端基础</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/html&amp;css/html&amp;css.html" class="nav-link"><i class="iconfont undefined"></i>
  Html&amp;css
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/JavaScript/JavaScript.html" class="nav-link"><i class="iconfont undefined"></i>
  JavaScript
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html" class="nav-link"><i class="iconfont undefined"></i>
  ES6
</a></li></ul></li><li class="dropdown-item"><h4>Vue框架</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue基础/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue核心基础
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue进阶/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue组件开发
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/cli与axio请求/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Cli与Axios
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue Router
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vueX/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  vueX
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      后端学习
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>Java</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/java/java基础/javase.html" class="nav-link"><i class="iconfont undefined"></i>
  JavaSE
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/java/MyBatis/MyBatis.html" class="nav-link"><i class="iconfont undefined"></i>
  MyBatis
</a></li></ul></li><li class="dropdown-item"><h4>PHP</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/php/php基础/php基础.html" class="nav-link"><i class="iconfont undefined"></i>
  PHP基础
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/php/thinkPHP/tp.html" class="nav-link"><i class="iconfont undefined"></i>
  thinkPHP
</a></li></ul></li><li class="dropdown-item"><h4>MySql</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/mySql/mySql.html" class="nav-link"><i class="iconfont undefined"></i>
  MySql
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-blog"></i>
      随笔
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/xiaoliantongxue/resources/随笔/关于作者/aboutMe.html" class="nav-link"><i class="iconfont undefined"></i>
  关于作者
</a></li><li class="dropdown-item"><!----> <a href="/xiaoliantongxue/resources/随笔/生活分享/life.html" class="nav-link"><i class="iconfont undefined"></i>
  京城少爷“阿辉”
</a></li></ul></div></div><div class="nav-item"><a href="/xiaoliantongxue/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-4698c43e></div> <aside class="sidebar" data-v-4698c43e><div class="personal-info-wrapper" data-v-6c8ffc9c><img src="/xiaoliantongxue/avatar.png" alt="author-avatar" class="personal-img" data-v-6c8ffc9c> <h3 class="name" data-v-6c8ffc9c>
    小连同学
  </h3> <div class="num" data-v-6c8ffc9c><div data-v-6c8ffc9c><h3 data-v-6c8ffc9c>15</h3> <h6 data-v-6c8ffc9c>文章</h6></div> <div data-v-6c8ffc9c><h3 data-v-6c8ffc9c>13</h3> <h6 data-v-6c8ffc9c>标签</h6></div></div> <hr data-v-6c8ffc9c></div> <nav class="nav-links"><div class="nav-item"><a href="/xiaoliantongxue/resources/编程指南/" class="nav-link"><i class="iconfont reco-eye"></i>
  编程指南
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>
      前端学习
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端基础</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/html&amp;css/html&amp;css.html" class="nav-link"><i class="iconfont undefined"></i>
  Html&amp;css
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/JavaScript/JavaScript.html" class="nav-link"><i class="iconfont undefined"></i>
  JavaScript
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html" class="nav-link"><i class="iconfont undefined"></i>
  ES6
</a></li></ul></li><li class="dropdown-item"><h4>Vue框架</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue基础/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue核心基础
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue进阶/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue组件开发
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/cli与axio请求/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Cli与Axios
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue Router
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vueX/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  vueX
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      后端学习
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>Java</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/java/java基础/javase.html" class="nav-link"><i class="iconfont undefined"></i>
  JavaSE
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/java/MyBatis/MyBatis.html" class="nav-link"><i class="iconfont undefined"></i>
  MyBatis
</a></li></ul></li><li class="dropdown-item"><h4>PHP</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/php/php基础/php基础.html" class="nav-link"><i class="iconfont undefined"></i>
  PHP基础
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/php/thinkPHP/tp.html" class="nav-link"><i class="iconfont undefined"></i>
  thinkPHP
</a></li></ul></li><li class="dropdown-item"><h4>MySql</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/mySql/mySql.html" class="nav-link"><i class="iconfont undefined"></i>
  MySql
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-blog"></i>
      随笔
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/xiaoliantongxue/resources/随笔/关于作者/aboutMe.html" class="nav-link"><i class="iconfont undefined"></i>
  关于作者
</a></li><li class="dropdown-item"><!----> <a href="/xiaoliantongxue/resources/随笔/生活分享/life.html" class="nav-link"><i class="iconfont undefined"></i>
  京城少爷“阿辉”
</a></li></ul></div></div><div class="nav-item"><a href="/xiaoliantongxue/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>ES6</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html" class="active sidebar-link">ES6 常用知识</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#es6" class="sidebar-link">ES6</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#let-const" class="sidebar-link">let const</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#模板字符串" class="sidebar-link">模板字符串</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#解构赋值" class="sidebar-link">解构赋值</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#函数的扩展" class="sidebar-link">函数的扩展</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#扩展运算符" class="sidebar-link">扩展运算符</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#数组的扩展" class="sidebar-link">数组的扩展</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#对象的扩展" class="sidebar-link">对象的扩展</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#运算符的扩展" class="sidebar-link">运算符的扩展</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#esmodule" class="sidebar-link">ESModule</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html#promise" class="sidebar-link">Promise</a></li></ul></li></ul></section></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-6cbeab0a data-v-4698c43e><h3 class="title" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a>ES6 常用知识 </h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><input type="password" value="" data-v-6cbeab0a> <span data-v-6cbeab0a>Konck! Knock!</span> <button data-v-6cbeab0a>OK</button></label> <div class="footer" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><span data-v-6cbeab0a><i class="iconfont reco-theme" data-v-6cbeab0a></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-6cbeab0a>vuePress-theme-reco</a></span> <span data-v-6cbeab0a><i class="iconfont reco-copyright" data-v-6cbeab0a></i> <a data-v-6cbeab0a><span data-v-6cbeab0a>小连同学</span>
            
          <span data-v-6cbeab0a>2022 - </span>
          2023
        </a></span></div></div> <div data-v-4698c43e><main class="page"><!----> <div class="page-title" style="display:none;"><h1>ES6 常用知识</h1> <hr> <div data-v-484a899e><i class="iconfont reco-account" data-v-484a899e><span data-v-484a899e>小连同学</span></i> <i class="iconfont reco-date" data-v-484a899e><span data-v-484a899e>2023-03-15 16:44:15</span></i> <!----> <i class="iconfont reco-tag tags" data-v-484a899e><span class="tag-item" data-v-484a899e>
      ES6
    </span><span class="tag-item" data-v-484a899e>
      js
    </span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><div class="custom-block tip"><p class="custom-block-title">说明</p> <p><code>ECMAScript 6</code> (简称 <code>ES6</code>) 是 <code>JavaScript</code> 语言的下一代标准</p></div> <h2 id="es6"><a href="#es6" class="header-anchor">#</a> ES6</h2> <p><code>ECMAScript 6</code> (简称 <code>ES6</code>) 是 <code>JavaScript</code> 语言的下一代标准</p> <p><code>ECMAScript</code> 的提案流程</p> <ul><li><code>Stage 0 - Strawman</code>（展示阶段）</li> <li><code>Stage 1 - Proposal</code>（征求意见阶段）</li> <li><code>Stage 2 - Draft</code>（草案阶段）</li> <li><code>Stage 3 - Candidate</code>（候选人阶段）</li> <li><code>Stage 4 - Finished</code>（定案阶段）</li></ul> <p>一个提案只要能进入 <code>Stage 2</code> 就差不多肯定会包括在以后的正式标准里面</p> <p><a href="https://github.com/tc39/ecma262" target="_blank" rel="noopener noreferrer">ECMAScript 当前的所有提案<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>ES6 和 ES2015 的区别</p> <p><code>ES2015</code> 是一个年份标记，表示当年发布的 <code>ECMAScript</code> 标准的正式版本，其全称为《<code>ECMAScript 2015</code> 标准》（简称 <code>ES2015</code>）<br> <code>ES6</code> 是一个历史名词也是一个泛指，含义是 <code>5.1</code> 版以后的 <code>JavaScript</code> 的下一代标准，涵盖了 <code>ES2015、ES2016、ES2017 ES2018</code> 等等</p> <h2 id="let-const"><a href="#let-const" class="header-anchor">#</a> let const</h2> <p><code>ES6</code> 新增了 <strong><code>let</code></strong> 和 <strong><code>const</code></strong> 命令，用于声明变量，其声明的变量只在声明所在的块级作用域内有效</p> <p>let const var 的区别</p> <ul><li><code>var</code> 声明的变量会提升到作用域的顶部，<code>let const</code> 不存在变量提升</li> <li><code>var</code> 声明的全局变量会被挂载到全局对象 <code>window</code> 上，而 <code>let const</code> 不会</li> <li><code>var</code> 可以对一个变量进行重复声明，而 <code>let const</code> 不能重复声明</li> <li><code>var</code> 声明的变量作用域范围是函数作用域，<code>let const</code> 声明的变量作用域范围是块级作用域</li> <li><code>const</code> 声明的是一个只读的常量，一旦声明常量的值就不能改变(必须对变量进行初始化)
<ul><li>基本类型保证值不可变</li> <li>引用类型保证内存指针不可变</li></ul></li></ul> <h3 id="变量提升"><a href="#变量提升" class="header-anchor">#</a> 变量提升</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// 输出 undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// 报错</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token comment">// 报错</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'var'</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token string">'let'</span>
<span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token string">'const'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="挂载到全局对象"><a href="#挂载到全局对象" class="header-anchor">#</a> 挂载到全局对象</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'var'</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token string">'let'</span>
<span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token string">'const'</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>a<span class="token punctuation">)</span> <span class="token comment">// 输出 var</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>b<span class="token punctuation">)</span> <span class="token comment">// 输出 undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>c<span class="token punctuation">)</span> <span class="token comment">// 输出 undefined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="重复声明"><a href="#重复声明" class="header-anchor">#</a> 重复声明</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'var'</span>
<span class="token keyword">var</span> a
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// 输出 var</span>

<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token string">'let'</span>
<span class="token keyword">let</span> b <span class="token comment">// 报错</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="作用域范围"><a href="#作用域范围" class="header-anchor">#</a> 作用域范围</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'var'</span>
    <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token string">'let'</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// 输出 var</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// 输出 let</span>
  <span class="token punctuation">}</span>

  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// 输出 var</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// 报错</span>
<span class="token punctuation">}</span>

<span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="const-常量定义"><a href="#const-常量定义" class="header-anchor">#</a> const 常量定义</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token constant">NAME</span> <span class="token operator">=</span> <span class="token string">'maomao'</span>
<span class="token constant">NAME</span> <span class="token operator">=</span> <span class="token string">'maomao1996'</span> <span class="token comment">// 报错</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="模板字符串"><a href="#模板字符串" class="header-anchor">#</a> 模板字符串</h2> <p>模板字符串 (template string) 是增强版的字符串，用反引号(<strong>`</strong>)标识。它可以当作普通字符串、定义多行字符串或者在字符串中嵌入变量、函数调用以及表达式</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">'maomao'</span>
<span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">18</span>

<span class="token comment">/* ES5 拼接字符串 */</span>
<span class="token keyword">let</span> es5Str <span class="token operator">=</span> <span class="token string">'我叫: '</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">'，我的年龄是: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>age <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">' 岁'</span>

<span class="token comment">/* ES6 模板字符串 */</span>
<span class="token keyword">let</span> es6Str <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">我叫: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">，我的年龄是: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 岁</span><span class="token template-punctuation string">`</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="解构赋值"><a href="#解构赋值" class="header-anchor">#</a> 解构赋值</h2> <h3 id="解构对象"><a href="#解构对象" class="header-anchor">#</a> 解构对象</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'maomao'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span>
<span class="token punctuation">}</span>

<span class="token comment">// ES5 写法</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> obj<span class="token punctuation">.</span>name
<span class="token keyword">const</span> age <span class="token operator">=</span> obj<span class="token punctuation">.</span>age

<span class="token comment">/* ES6 解构写法 */</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> obj
<span class="token comment">// 重命名</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> myName <span class="token punctuation">}</span> <span class="token operator">=</span> obj

<span class="token comment">/* 指定默认值 */</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> y <span class="token operator">=</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span> <span class="token comment">// null</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="解构数组"><a href="#解构数组" class="header-anchor">#</a> 解构数组</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'maomao'</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">]</span>

<span class="token comment">/* ES5 写法 */</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> age <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>

<span class="token comment">/* ES6 解构写法 */</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>name<span class="token punctuation">,</span> age<span class="token punctuation">]</span> <span class="token operator">=</span> arr
<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> name<span class="token punctuation">,</span> <span class="token number">1</span><span class="token operator">:</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> arr

<span class="token comment">/* 指定默认值 */</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>y <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">undefined</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span> <span class="token comment">// 2</span>

<span class="token keyword">const</span> <span class="token punctuation">[</span>z <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>z<span class="token punctuation">)</span> <span class="token comment">// null</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="解构字符串"><a href="#解构字符串" class="header-anchor">#</a> 解构字符串</h3> <p>字符串也可以解构赋值，因为字符串被转换成了一个类似数组的对象</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'maomao'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// m</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// a</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token comment">// o</span>

<span class="token comment">/* 解构 length 属性 */</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> length <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token string">'maomao'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>length<span class="token punctuation">)</span> <span class="token comment">// 6</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>解构赋值注意点</p> <ul><li>解构数组和字符串时变量的取值由它的位置决定</li> <li>解构对象时变量必须与属性同名，才能取到正确的值</li> <li>变量在没有找到对应的值，多余的变量会被赋值为 <code>undefined</code></li> <li>在指定默认值时，只有属性值严格等于 <code>undefined</code> 才会生效</li> <li>数组本质是特殊的对象，因此可以对数组进行对象属性的解构</li> <li>解构数值和布尔值时会通过其对应的包装函数将其转换成对象再解构</li> <li><code>undefined</code> 和 <code>null</code> 无法转为对象，在解构时会报错</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> toString <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token number">123</span>
toString <span class="token operator">===</span> <span class="token class-name">Number</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString <span class="token comment">// true</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> toString <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token boolean">true</span>
toString <span class="token operator">===</span> <span class="token class-name">Boolean</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString <span class="token comment">// true</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> x <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">undefined</span> <span class="token comment">// TypeError</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> y <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token comment">// TypeError</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="函数的扩展"><a href="#函数的扩展" class="header-anchor">#</a> 函数的扩展</h2> <h3 id="参数默认值"><a href="#参数默认值" class="header-anchor">#</a> 参数默认值</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* ES5 */</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 当参数 y 对应的布尔值为 false 则该赋值不起作用</span>
  y <span class="token operator">=</span> y <span class="token operator">||</span> <span class="token number">1</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token operator">+</span> y<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token comment">// 11</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// 12</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// 11</span>

<span class="token comment">/* ES6 */</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y <span class="token operator">=</span> <span class="token number">1</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token operator">+</span> y<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token comment">// 11</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// 12</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// 10</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>函数参数的默认值</p> <ul><li>参数变量是默认声明的不能用 <code>let</code>或 <code>const</code> 再次声明，否则会报错</li> <li>使用参数默认值时函数不能有同名参数</li> <li>参数默认值的位置应该是函数的尾参数</li></ul> <h3 id="剩余参数-rest-参数"><a href="#剩余参数-rest-参数" class="header-anchor">#</a> 剩余参数(rest 参数)</h3> <p><code>ES6</code> 引入 <code>rest</code> 参数(形式为 <code>...变量名</code>) 用于获取函数的剩余参数(可以替换 <code>arguments</code> 对象)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> <span class="token operator">...</span>params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> params<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'maomao'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// maomao [1, 2]</span>
<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'maomao'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// maomao [1, 2, 3]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>剩余参数(rest 参数)</p> <ul><li><code>rest</code> 参数是一个真正的数组，数组特有的方法都可以使用</li> <li><code>rest</code> 参数之后不能再有其他参数，否则会报错</li> <li>函数的 <code>length</code> 属性，不包括 <code>rest</code> 参数</li></ul> <h3 id="箭头函数"><a href="#箭头函数" class="header-anchor">#</a> 箭头函数</h3> <p><code>ES6</code> 允许使用<strong>箭头</strong>(<code>=&gt;</code>)定义函数</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 不需要参数时使用一个圆括号代表参数部分</span>
<span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">// 等同于</span>
<span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">// 当函数体只有 return 时</span>
<span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> value
<span class="token comment">// 等同于</span>
<span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> value
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>箭头函数与普通函数的区别</p> <ul><li><code>this</code> <ul><li>普通函数
<ul><li><code>this</code> 指向是动态的(取决于函数的调用方式)</li> <li>可以用 <code>call apply bind</code> 改变 <code>this</code> 指向</li></ul></li> <li>箭头函数
<ul><li><code>this</code> 指向是固定的，指向定义时上层作用域中的 <code>this</code>(它没有自己的 <code>this</code>)</li> <li><code>call apply bind</code> 无法改变箭头函数的 <code>this</code> 指向(上下文值始终按词法解析)</li> <li>全局作用域下 <code>this</code> 指向全局对象</li></ul></li></ul></li> <li>箭头函数不可以当作构造函数(不能使用 <code>new</code> 运算符，否则会报错)</li> <li>箭头函数的函数体内不可以使用<code>arguments super new.target</code></li> <li>箭头函数不可以使用 yield 命令(不能用作 <code>Generator</code> 函数)</li> <li>在 <code>class</code> 中使用箭头函数其 <code>this</code> 会和类实例进行绑定</li></ul> <p>注意点(以下场合不应该使用箭头函数)</p> <ul><li>定义对象方法且该方法内部包括 <code>this</code> 时</li> <li>定义原型方法且该方法内部包括 <code>this</code> 时</li> <li>需要动态 <code>this</code> 时</li></ul> <p>利用 <code>babel</code> 编译箭头函数代码查看 <code>this</code> 的指向</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* ES6 */</span>
<span class="token keyword">const</span> <span class="token function-variable function">log</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'log this:'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'fn this:'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* babel 编译后的 ES5 代码 */</span>
<span class="token keyword">var</span> _this <span class="token operator">=</span> <span class="token keyword">this</span>

<span class="token keyword">var</span> <span class="token function-variable function">log</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'log this:'</span><span class="token punctuation">,</span> _this<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> _this2 <span class="token operator">=</span> <span class="token keyword">this</span>

  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'fn this:'</span><span class="token punctuation">,</span> _this2<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="扩展运算符"><a href="#扩展运算符" class="header-anchor">#</a> 扩展运算符</h2> <p>扩展运算符 (<code>spread</code>)是三个点 (<code>...</code>) 它好比 <code>rest</code> 参数的逆运算</p> <h3 id="函数调用"><a href="#函数调用" class="header-anchor">#</a> 函数调用</h3> <p>扩展运算符在函数调用时可以将一个数组变为参数序列，从而可以替代函数的 <code>apply()</code> 方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 举个 🌰 求出一个数组最大元素</span>
<span class="token comment">/* ES5 写法 */</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">520</span><span class="token punctuation">,</span> <span class="token number">1314</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token comment">/* ES6 写法 */</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">520</span><span class="token punctuation">,</span> <span class="token number">1314</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token comment">// 等同于</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">520</span><span class="token punctuation">,</span> <span class="token number">1314</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="拷贝数组-对象"><a href="#拷贝数组-对象" class="header-anchor">#</a> 拷贝数组/对象</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 拷贝数组 */</span>
<span class="token keyword">const</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token comment">// 写法一</span>
<span class="token keyword">const</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">]</span>
<span class="token comment">// 写法二</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr2<span class="token punctuation">]</span> <span class="token operator">=</span> arr1

<span class="token comment">/* 拷贝对象 */</span>
<span class="token keyword">const</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'maomao'</span> <span class="token punctuation">}</span>
<span class="token comment">// 写法一</span>
<span class="token keyword">const</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>obj1 <span class="token punctuation">}</span>
<span class="token comment">// 写法二</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token operator">...</span>obj2 <span class="token punctuation">}</span> <span class="token operator">=</span> obj1
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="合并数组-对象"><a href="#合并数组-对象" class="header-anchor">#</a> 合并数组/对象</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 合并数组 */</span>
<span class="token keyword">const</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span> <span class="token operator">...</span>arr2<span class="token punctuation">]</span>

<span class="token comment">/* 合并对象 */</span>
<span class="token keyword">const</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'maomao'</span> <span class="token punctuation">}</span>
<span class="token keyword">const</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span> <span class="token punctuation">}</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>obj1<span class="token punctuation">,</span> <span class="token operator">...</span>obj2 <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="使用表达式"><a href="#使用表达式" class="header-anchor">#</a> 使用表达式</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token punctuation">(</span><span class="token boolean">false</span> <span class="token operator">?</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>
<span class="token comment">// {b: 2}</span>

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token operator">?</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>
<span class="token comment">// {a: 1, b: 2}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="与解构赋值结合"><a href="#与解构赋值结合" class="header-anchor">#</a> 与解构赋值结合</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>

<span class="token comment">/* ES5 写法 */</span>
<span class="token keyword">const</span> first <span class="token operator">=</span> arr1<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> rest <span class="token operator">=</span> arr1<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>

<span class="token comment">/* ES6 写法 */</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>first<span class="token punctuation">,</span> <span class="token operator">...</span>rest<span class="token punctuation">]</span> <span class="token operator">=</span> arr1
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>扩展运算符</p> <ul><li>使用扩展运算符拷贝数组或对象时其都是<strong>浅拷贝</strong></li> <li>对象的扩展运算符等同于使用 <code>Object.assign()</code> 方法</li> <li>只有函数调用时扩展运算符才可以放在圆括号中，否则会报错</li> <li>扩展运算符用于赋值时只能放在参数的最后一位，否则会报错</li></ul> <h2 id="数组的扩展"><a href="#数组的扩展" class="header-anchor">#</a> 数组的扩展</h2> <h3 id="array-from"><a href="#array-from" class="header-anchor">#</a> Array.from()</h3> <p><code>Array.from()</code> 用于将两类对象转为真正的数组</p> <ul><li>类似数组的对象 (<code>array-like object</code>)
<ul><li><code>DOM</code> 操作返回的 <code>NodeList</code></li> <li><code>arguments</code> 对象</li></ul></li> <li>可遍历 (<code>iterable</code>) 的对象 (包括 <code>ES6</code> 新增的数据结构 <code>Set</code> 和 <code>Map</code>)</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* array-like object 转数组 */</span>
<span class="token keyword">const</span> arrayLike <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token number">0</span><span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span>
  <span class="token number">1</span><span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span>
  <span class="token number">2</span><span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span>

<span class="token comment">// ES5 写法</span>
<span class="token keyword">var</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arrayLike<span class="token punctuation">)</span> <span class="token comment">// ['a', 'b', 'c']</span>

<span class="token comment">// ES6 写法</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>arrayLike<span class="token punctuation">)</span> <span class="token comment">// ['a', 'b', 'c']</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>Array.from()</p> <p><code>Array.from()</code> 可以接受一个函数作为第二个参数，作用类似于数组的<code>map()</code> 用来对每个元素进行处理，将处理后的值放入返回的数组</p> <p>在字符串转为数组时 <code>Array.from()</code> 能正确处理各种 <code>Unicode</code> 字符，可以避免 <code>JavaScript</code> 将大于 <code>\uFFFF</code> 的 <code>Unicode</code> 字符算作两个字符的 <code>bug</code></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token string">'𠮷'</span><span class="token punctuation">.</span>length <span class="token comment">// 2</span>
Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token string">'𠮷'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// 1</span>

<span class="token string">'👪'</span><span class="token punctuation">.</span>length <span class="token comment">// 2</span>
Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token string">'👪'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// 1</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="array-of"><a href="#array-of" class="header-anchor">#</a> Array.of()</h3> <p><code>Array.of()</code> 用于将一组值转换为数组</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Array<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span> <span class="token comment">// [3,11,8]</span>
Array<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// [3]</span>
Array<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// 1</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Array.of()</p> <p><code>Array.of()</code> 方法的主要目的是弥补数组构造函数 <code>Array()</code> 的不足(因为参数个数的不同会导致<code>Array()</code>的行为有差异)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// []</span>
<span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// [, , ,]</span>
<span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span> <span class="token comment">// [3, 11, 8]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>Array.of()</code> 总是返回参数值组成的数组。如果没有参数就返回一个空数组</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* Array.of() 的模拟实现 */</span>
<span class="token keyword">function</span> <span class="token function">ArrayOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="实例方法-includes"><a href="#实例方法-includes" class="header-anchor">#</a> 实例方法: includes()</h3> <p><code>includes()</code> 方法返回一个布尔值，表示某个数组是否包含给定的值(<code>ES2016</code> 引入)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">]</span>
arr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
arr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
arr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>includes() 和 indexOf() 的对比</p> <p><code>indexOf()</code> 不够语义化，其含义是找到参数值的第一个出现位置，所以要去比较是否不等于 <code>-1</code>，表达起来不够直观<br> <code>indexOf()</code> 内部使用严格相等运算符 (<code>===</code>) 进行判断，这会导致对 <code>NaN</code> 的误判</p> <h3 id="实例方法-find-和-findindex"><a href="#实例方法-find-和-findindex" class="header-anchor">#</a> 实例方法: find() 和 findIndex()</h3> <p><code>find()</code> 方法用于找出第一个符合条件的数组成员，如果<strong>没有符合条件的成员则返回 <code>undefined</code></strong></p> <p><code>findIndex()</code> 方法用于找出第一个符合条件的数组成员的位置，如果<strong>没有符合条件的成员则返回 <code>-1</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">]</span>

<span class="token comment">/* find() */</span>
arr<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item <span class="token operator">&gt;</span> <span class="token number">9</span><span class="token punctuation">)</span> <span class="token comment">// 10</span>
arr<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item <span class="token operator">===</span> <span class="token number">9</span><span class="token punctuation">)</span> <span class="token comment">// undefined</span>

<span class="token comment">/* findIndex() */</span>
arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item <span class="token operator">&gt;</span> <span class="token number">9</span><span class="token punctuation">)</span> <span class="token comment">// 2</span>
arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item <span class="token operator">===</span> <span class="token number">9</span><span class="token punctuation">)</span> <span class="token comment">// -1</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="实例方法-at"><a href="#实例方法-at" class="header-anchor">#</a> 实例方法: at()</h3> <p><code>at()</code> 方法接受一个整数(支持负数)作为参数返回对应位置的成员，如果<strong>参数位置超出了数组范围则返回 <code>undefined</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'maomao'</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">]</span>

arr<span class="token punctuation">.</span><span class="token function">at</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// 'maomao'</span>
arr<span class="token punctuation">.</span><span class="token function">at</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 18</span>
arr<span class="token punctuation">.</span><span class="token function">at</span><span class="token punctuation">(</span><span class="token number">99</span><span class="token punctuation">)</span> <span class="token comment">// undefined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="实例方法-flat-和-flatmap"><a href="#实例方法-flat-和-flatmap" class="header-anchor">#</a> 实例方法: flat() 和 flatMap()</h3> <p><code>flat()</code> 方法用于将嵌套的数组拍平变成一维的数组，该方法<strong>返回一个新数组不改变原数组</strong></p> <p><code>flatMap()</code> 方法会先对原数组的每个成员执行一个函数(相当于执行 <code>Array.prototype.map()</code>) 然后对返回值组成的数组执行 <code>flat()</code> 方法，该方法<strong>返回一个新数组不改变原数组</strong></p> <p>js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* flat() */</span>
<span class="token keyword">const</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>

arr1<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// [1, 2, 3, [4, 5]]</span>
arr1<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// [1, 2, 3, 4, 5]</span>

arr2<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// [1, 2, 4, 5]</span>

<span class="token comment">/* flatMap() */</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>
arr<span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [[2], [4], [6], [8]]</span>
<span class="token comment">// 相当于 [[2, 4], [3, 6], [4, 8]].flat()</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>flat() 和 flatMap() 注意点</p> <ul><li><code>flat()</code> 方法默认只会拉平一层</li> <li><code>flat()</code>方法会跳过原数组中的空位</li> <li><code>flatMap()</code> 只能展开一层数组</li></ul> <h2 id="对象的扩展"><a href="#对象的扩展" class="header-anchor">#</a> 对象的扩展</h2> <h3 id="属性简写"><a href="#属性简写" class="header-anchor">#</a> 属性简写</h3> <p><code>ES6</code> 允许在大括号里面直接写入变量和函数作为对象的属性和方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 属性简写 */</span>
<span class="token comment">// ES5 写法</span>
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'maomao'</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> key <span class="token punctuation">}</span>

<span class="token comment">// ES6 写法</span>
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'maomao'</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> key <span class="token punctuation">}</span>

<span class="token comment">/* 方法简写 */</span>
<span class="token comment">// ES5 写法</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">log</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'maomao'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// ES6 写法</span>
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'maomao'</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>属性简写</p> <p>简写的对象方法不能用作构造函数否则会报错</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'maomao'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">new</span> <span class="token class-name">obj<span class="token punctuation">.</span>f</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 报错</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="属性名表达式"><a href="#属性名表达式" class="header-anchor">#</a> 属性名表达式</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 定义属性名</span>
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'age'</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span><span class="token string">'name'</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'maomao'</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token number">18</span>
<span class="token punctuation">}</span>

<span class="token comment">// 定义方法名</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span><span class="token string">'log'</span> <span class="token operator">+</span> <span class="token string">'name'</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'maomao'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>属性名表达式</p> <p>属性名表达式与属性简写不能同时使用否则会报错</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 报错</span>
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'name'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token punctuation">}</span>

<span class="token comment">// 正确</span>
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'name'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'maomao'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>属性名表达式如果是一个对象会自动将其转为字符串 <code>[object Object]</code></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> keyA <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>
<span class="token keyword">const</span> keyB <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span>

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>keyA<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'valueA'</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>keyB<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'valueB'</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">// {[object Object]: 'valueB'}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="object-is"><a href="#object-is" class="header-anchor">#</a> Object.is()</h3> <p><code>Object.is()</code> 方法用来比较两个值是否严格相等，严格比较运算符 (<code>===</code>) 的行为基本一致</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token string">'key'</span><span class="token punctuation">,</span> <span class="token string">'key'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Object.is() 与 === 的不同之处</p> <p><code>+0</code>不等于<code>-0</code></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* +0 不等于 -0 */</span>
<span class="token punctuation">;</span><span class="token operator">+</span><span class="token number">0</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">0</span> <span class="token comment">// true</span>
Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token operator">+</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// false</span>

<span class="token comment">/* NaN 等于自身 */</span>
<span class="token number">NaN</span> <span class="token operator">===</span> <span class="token number">NaN</span> <span class="token comment">// false</span>
Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="object-assign"><a href="#object-assign" class="header-anchor">#</a> Object.assign()</h3> <p><code>Object.assign()</code> 方法用于对象的合并，将源对象的所有可枚举属性复制到目标对象（第一个参数是目标对象后面的参数都是源对象）</p> <p>js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> target <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>

<span class="token keyword">const</span> source1 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span>
<span class="token keyword">const</span> source2 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span>

Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> source1<span class="token punctuation">,</span> source2<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h5 id="只有一个参数时会直接返回该参数"><a href="#只有一个参数时会直接返回该参数" class="header-anchor">#</a> 只有一个参数时会直接返回该参数</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">===</span> obj <span class="token comment">// true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="传入参数不是对象时会先转成对象再返回"><a href="#传入参数不是对象时会先转成对象再返回" class="header-anchor">#</a> 传入参数不是对象时会先转成对象再返回</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">typeof</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// &quot;object&quot;</span>
<span class="token keyword">typeof</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token comment">// &quot;object&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="传入非对象类型的场景"><a href="#传入非对象类型的场景" class="header-anchor">#</a> 传入非对象类型的场景</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* undefined 和 null */</span>
<span class="token comment">// 首位参数时会报错</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token comment">// TypeError</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token comment">// TypeError</span>
<span class="token comment">// 非首位参数时会忽略</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token operator">===</span> obj <span class="token comment">// true</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token operator">===</span> obj <span class="token comment">// true</span>

<span class="token comment">/* 非首位参数为数值 布尔值 字符串时 */</span>
<span class="token comment">// 数值和布尔值会忽略</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token operator">===</span> obj <span class="token comment">// true</span>
<span class="token comment">// 字符串会以字符数组的形式做合并</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'maomao'</span><span class="token punctuation">)</span> <span class="token comment">// {0: 'm', 1: 'a', 2: 'o', 3: 'm', 4: 'a', 5: 'o'}</span>

<span class="token comment">/* 数组 */</span>
<span class="token comment">// 当参数都为数组时</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [4, 5, 3]</span>
<span class="token comment">// 当首位参数为对象时，后续参数为数组时</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// {0: 1, 1: 2, a: 1}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h5 id="传入数组时会把数组当对象处理"><a href="#传入数组时会把数组当对象处理" class="header-anchor">#</a> 传入数组时会把数组当对象处理</h5> <p>js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [4, 5, 3]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>1</p> <p>Object.assign() 总结和应用场景</p> <p>总结</p> <ul><li><code>Object.assign()</code> 是<strong>浅拷贝</strong>方法</li> <li>存在同名属性时，后面的属性会覆盖前面的属性</li> <li>只有一个参数时会直接返回该参数</li> <li>传入参数不是对象时会先转成对象再返回</li> <li>传入 <code>undefined</code> 和 <code>null</code> 时
<ul><li>如果为第一个参数会报错（无法转成对象）</li> <li>如果不为第一个参数时会被忽略</li></ul></li> <li>传入数组时会把数组当对象处理</li></ul> <p>应用场景</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 为对象添加属性 */</span>
<span class="token keyword">class</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> x<span class="token punctuation">,</span> y <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 为对象添加方法 */</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">/* 拷贝对象 */</span>
<span class="token keyword">const</span> <span class="token function-variable function">clone</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">origin</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> origin<span class="token punctuation">)</span>

<span class="token comment">/* 合并多个对象 */</span>
<span class="token keyword">const</span> <span class="token function-variable function">merge</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">target<span class="token punctuation">,</span> <span class="token operator">...</span>sources</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> <span class="token operator">...</span>sources<span class="token punctuation">)</span>

<span class="token comment">/* 为属性指定默认值 */</span>
<span class="token keyword">const</span> <span class="token constant">DEFAULTS</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">2000</span> <span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">toast</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  options <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token constant">DEFAULTS</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'提示'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// {duration: 2000, content: '提示'}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="object-keys-object-value-object-entries"><a href="#object-keys-object-value-object-entries" class="header-anchor">#</a> Object.keys() Object.value() Object.entries()</h3> <p><code>Object.keys()</code> 方法返回一个数组，其成员为参数对象自身的（不含继承的）所有可遍历属性的键名(<code>ES5</code> 引入)</p> <p><code>Object.value()</code> 方法返回一个数组，其成员为参数对象自身的（不含继承的）所有可遍历属性的键值(<code>ES2017</code> 引入)</p> <p><code>Object.entries()</code> 方法返回一个数组（二维数组），其成员为参数对象自身的（不含继承的）所有可遍历属性的键值对数组(<code>ES2017</code> 引入)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'maomao'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span> <span class="token punctuation">}</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">// ['name', 'age']</span>
Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">//  ['maomao', 18]</span>
Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">// [['name', 'maomao'], ['age', 18]]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="object-fromentries"><a href="#object-fromentries" class="header-anchor">#</a> Object.fromEntries()</h3> <p><code>Object.fromEntries()</code> 方法是 <code>Object.entries()</code> 的逆操作，用于将键值对的数据结构还原为对象</p> <p>js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'maomao'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// {name: 'maomao'}</span>

<span class="token comment">/* Map 转对象 */</span>
<span class="token keyword">const</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'maomao'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span> <span class="token comment">// {name: 'maomao'}</span>

<span class="token comment">/* 将查询字符串转为对象 */</span>
<span class="token keyword">const</span> params <span class="token operator">=</span> <span class="token string">'name=maomao&amp;age=18'</span>
Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">URLSearchParams</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// {name: 'maomao', age: '18'}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="对象遍历方法对比"><a href="#对象遍历方法对比" class="header-anchor">#</a> 对象遍历方法对比</h3> <table><thead><tr><th>方法名</th> <th style="text-align:left;">说明</th> <th style="text-align:center;">继承的原型属性</th> <th style="text-align:center;">不可枚举属性</th> <th style="text-align:center;">Symbol 属性</th> <th style="text-align:center;">返回值</th></tr></thead> <tbody><tr><td>for...in</td> <td style="text-align:left;">遍历对象自身和继承的所有可枚举属性(不含 Symbol 属性)</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">key</td></tr> <tr><td>Object.keys</td> <td style="text-align:left;">遍历对象自身所有可枚举属性(不含 Symbol 属性)</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">[key...]</td></tr> <tr><td>Object.getOwnPropertyNames</td> <td style="text-align:left;">遍历对象自身所有属性(不含 Symbol 属性)</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">[key...]</td></tr> <tr><td>Object.getOwnPropertySymbols</td> <td style="text-align:left;">遍历对象自身所有的 Symbol 属性</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">[key...]</td></tr> <tr><td>Reflect.ownKeys</td> <td style="text-align:left;">遍历对象自身所有的属性(包含不可枚举和 Symbol 属性)</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">[key...]</td></tr> <tr><td>Object.values</td> <td style="text-align:left;">遍历对象自身所有可枚举属性(不含 Symbol 属性)</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">[value...]</td></tr> <tr><td>Object.entries</td> <td style="text-align:left;">遍历对象自身所有可枚举属性(不含 Symbol 属性)</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">[[key,value]...]</td></tr></tbody></table> <p>遍历顺序</p> <p><code>ES5</code> 没有规定遍历顺序，其遍历顺序由浏览器厂商定义(可以简单理解为无序的)</p> <p><code>ES6</code> 之后规定遍历顺序将按如下规则进行</p> <ol><li>首先遍历所有数值键，按照数值升序排列。</li> <li>其次遍历所有字符串键，按照加入时间升序排列。</li> <li>最后遍历所有 <code>Symbol</code> 键，按照加入时间升序排列。</li></ol> <p><code>ES6</code> 内部定义了 OwnPropertyKeys方法对属性进行分类和排序</p> <h2 id="运算符的扩展"><a href="#运算符的扩展" class="header-anchor">#</a> 运算符的扩展</h2> <h3 id="可选链操作符"><a href="#可选链操作符" class="header-anchor">#</a> ?. 可选链操作符</h3> <p><a href="https://github.com/tc39/proposal-optional-chaining" target="_blank" rel="noopener noreferrer">ES2020<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 引入了可选链操作符(又名链判断运算符)，其允许我们在读取对象内部的某个属性时，不需要判断属性的上层对象是否存在</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 可选链操作符之前的写法</span>
<span class="token keyword">const</span> firstName <span class="token operator">=</span>
  <span class="token punctuation">(</span>message <span class="token operator">&amp;&amp;</span> message<span class="token punctuation">.</span>body <span class="token operator">&amp;&amp;</span> message<span class="token punctuation">.</span>body<span class="token punctuation">.</span>user <span class="token operator">&amp;&amp;</span> message<span class="token punctuation">.</span>body<span class="token punctuation">.</span>user<span class="token punctuation">.</span>firstName<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">'default'</span>

<span class="token comment">// 可选链操作符简化写法</span>
<span class="token keyword">const</span> firstName <span class="token operator">=</span> message<span class="token operator">?.</span>body<span class="token operator">?.</span>user<span class="token operator">?.</span>firstName <span class="token operator">||</span> <span class="token string">'default'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>可选链操作符 <code>?.</code> 的三种写法</p> <p>js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 属性是否存在 */</span>
obj<span class="token operator">?.</span>prop
obj<span class="token operator">?.</span><span class="token punctuation">[</span>expr<span class="token punctuation">]</span>
<span class="token comment">// 等同于</span>
obj <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> <span class="token keyword">undefined</span> <span class="token operator">:</span> obj<span class="token punctuation">.</span>prop

<span class="token comment">/* 函数或对象方法是否存在 */</span>
func<span class="token operator">?.</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span>
<span class="token comment">// 等同于</span>
func <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> <span class="token keyword">undefined</span> <span class="token operator">:</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>注意点</p> <ol><li>可选链操作符相当于一种短路机制，只要不满足条件就不再往下执行</li> <li>当有括号时，可选链操作符对圆括号外部没有影响，只对圆括号内部有影响。</li> <li>右侧不得为十进制数值。为了保证兼容以前的代码，允许 <code>foo?.3:0</code> 会被解析成 <code>foo ? .3 : 0</code>，因此规定如果 <code>?.</code> 后面紧跟一个十进制数字，那么 <code>?.</code> 不再被看成是一个完整的运算符，而会按照三元运算符进行处理，即小数点会归属于后面的十进制数字形成一个小数。</li> <li>禁止使用以下写法</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 构造函数</span>
<span class="token keyword">new</span> <span class="token class-name">a</span><span class="token operator">?.</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">new</span> <span class="token class-name">a</span><span class="token operator">?.</span><span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 右侧有模板字符串</span>
a<span class="token operator">?.</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">{b}</span><span class="token template-punctuation string">`</span></span>
a<span class="token operator">?.</span>b<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">{c}</span><span class="token template-punctuation string">`</span></span>

<span class="token comment">// 左侧是 super</span>
<span class="token keyword">super</span><span class="token operator">?.</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">super</span><span class="token operator">?.</span>foo

<span class="token comment">// 用于赋值运算符左侧</span>
a<span class="token operator">?.</span>b <span class="token operator">=</span> c
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="空值合并运算符"><a href="#空值合并运算符" class="header-anchor">#</a> ?? 空值合并运算符</h3> <p><a href="https://github.com/tc39/proposal-nullish-coalescing" target="_blank" rel="noopener noreferrer">ES2020<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 引入了空值合并运算符，只有运算符左侧的值为 <code>null</code> 或 <code>undefined</code> 时才会返回右侧的值</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* ?? 运算符 */</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">0</span> <span class="token operator">??</span> <span class="token string">'maomao'</span>         <span class="token comment">// 0</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token string">''</span> <span class="token operator">??</span> <span class="token string">'maomao'</span>        <span class="token comment">// ''</span>
<span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token operator">??</span> <span class="token string">'maomao'</span>      <span class="token comment">// 'maomao'</span>
<span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">undefined</span> <span class="token operator">??</span> <span class="token string">'maomao'</span> <span class="token comment">// 'maomao'</span>

<span class="token comment">/* || 运算符 */</span>
<span class="token keyword">const</span> <span class="token constant">A</span> <span class="token operator">=</span> <span class="token number">0</span> <span class="token operator">||</span> <span class="token string">'maomao'</span>         <span class="token comment">// 'maomao'</span>
<span class="token keyword">const</span> <span class="token constant">B</span> <span class="token operator">=</span> <span class="token string">''</span> <span class="token operator">||</span> <span class="token string">'maomao'</span>        <span class="token comment">// 'maomao'</span>
<span class="token keyword">const</span> <span class="token constant">C</span> <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token string">'maomao'</span>      <span class="token comment">// 'maomao'</span>
<span class="token keyword">const</span> <span class="token constant">D</span> <span class="token operator">=</span> <span class="token keyword">undefined</span> <span class="token operator">||</span> <span class="token string">'maomao'</span> <span class="token comment">// 'maomao'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>?? 和 || 的区别</p> <ul><li><strong><code>??</code> 运算符</strong>只有左侧是 <code>null</code> 或 <code>undefined</code>才会返回右侧的值</li> <li><strong><code>||</code> 运算符</strong>只要左侧是 <a href="/fe/javascript/conversions#toboolean">假值</a> 就会返回右侧的值</li></ul> <h3 id="逻辑赋值运算符"><a href="#逻辑赋值运算符" class="header-anchor">#</a> 逻辑赋值运算符</h3> <p><code>ES2021</code> 引了入三个新的逻辑赋值运算符，用于将逻辑运算符与赋值运算符进行结合</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 或赋值运算符 */</span>
x <span class="token operator">||=</span> y
<span class="token comment">// 等同于</span>
x <span class="token operator">||</span> <span class="token punctuation">(</span>x <span class="token operator">=</span> y<span class="token punctuation">)</span>

<span class="token comment">/* 与赋值运算符 */</span>
x <span class="token operator">&amp;&amp;=</span> y
<span class="token comment">// 等同于</span>
x <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>x <span class="token operator">=</span> y<span class="token punctuation">)</span>

<span class="token comment">/* Null 赋值运算符 */</span>
x <span class="token operator">??=</span> y
<span class="token comment">// 等同于</span>
x <span class="token operator">??</span> <span class="token punctuation">(</span>x <span class="token operator">=</span> y<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="esmodule"><a href="#esmodule" class="header-anchor">#</a> ESModule</h2> <p><code>ESModule</code> 是 <code>ES6</code> 在语言标准的层面上实现的模块功能，其设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系以及输入和输出的变量</p> <ul><li><code>ESModule</code> 是编译时加载，使静态分析成为可能</li> <li>模块内部<strong>自动使用严格模式</strong></li> <li>模块中的<strong>顶层 <code>this</code> 指向 <code>undefined</code></strong></li></ul> <h3 id="export-命令"><a href="#export-命令" class="header-anchor">#</a> export 命令</h3> <p><code>export</code> 命令用于规定模块的对外接口</p> <ul><li>一个模块就是一个独立的文件，该文件内部的所有变量外部无法获取，如果希望外部可以获取必须使用 <code>export</code> 关键字输出该变量</li> <li>通常情况下 <code>export</code> 输出的变量就是本来的名字，但可以使用 <code>as</code> 关键字重命名</li> <li><code>export</code> 命令规定的是对外的接口其必须与模块内部的变量建立一一对应关系</li> <li><code>export</code> 命令输出的接口与其对应的值是动态绑定关系(可以取到模块内部实时的值)</li> <li><code>export</code> 命令可以出现在模块的任何位置，只要处于<strong>模块顶层</strong>就可以(在块级作用域内使用会报错)</li></ul> <p>js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// util.js</span>
<span class="token comment">/* 单个输出 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'maomao'</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 统一输出 */</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'maomao'</span>
<span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> log <span class="token punctuation">}</span>

<span class="token comment">/* 使用 as 关键字重命名 */</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'maomao'</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> nickname <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="import-命令"><a href="#import-命令" class="header-anchor">#</a> import 命令</h3> <p><code>import</code> 命令用于输入其他模块提供的功能(变量、函数、class 等)</p> <ul><li><code>import</code> 命令<strong>输入的变量都是只读的</strong>(类似于常量，即基本类型不可重新赋值，引用类型可修改属性)</li> <li><code>import</code> 命令<strong>具有提升效果</strong>，会提升到整个模块的头部首先执行
<ul><li><code>import</code> 命令是编译阶段执行的</li> <li>不能使用表达式和变量</li></ul></li> <li>重复执行同一句 <code>import</code> 命令只会执行一次</li> <li><code>import</code> 后面的 <code>from</code> 指定模块文件的位置，其可以是相对路径，也可以是绝对路径</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// index.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> log <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./util'</span>

<span class="token comment">/* 使用 as 关键字重命名 */</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> nickname<span class="token punctuation">,</span> log <span class="token keyword">as</span> logName <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./util'</span>

<span class="token comment">/* 模块的整体加载 */</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> util <span class="token keyword">from</span> <span class="token string">'./util'</span>
util<span class="token punctuation">.</span>name <span class="token comment">// maomao</span>
util<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// maomao</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="export-default-命令"><a href="#export-default-命令" class="header-anchor">#</a> export default 命令</h3> <p><code>export default</code> 命令可以为模块指定默认输出，是<strong>对 <code>default</code> 赋值的特例，本质上是一种赋值</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 输出匿名函数 */</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'maomao'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">import</span> log <span class="token keyword">from</span> <span class="token string">'./export-default'</span>
<span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 'maomao'</span>

<span class="token comment">/* 输出非匿名函数 */</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> fn <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'maomao'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">import</span> log <span class="token keyword">from</span> <span class="token string">'./export-default'</span>
<span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 'maomao'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>export default 命令注意点</p> <ul><li>一个模块只能有一个默认输出(<code>export default</code> 命令只能使用一次)</li> <li><code>export default</code> 命令本质上是输出一个叫做 <code>default</code> 的变量或方法，使用时可以为它取任意名字</li> <li><code>export default</code> 命令后面是一个表达式，不能跟变量声明语句</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 错误 */</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token comment">/* 正确 */</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> a<span class="token punctuation">;</span>

<span class="token comment">// 直接输出</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token string">'maomao'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>export 和 export default 的区别</p> <ul><li><code>export {}</code> 导出的都是引用</li> <li><code>export default</code> 导出的都是值而不是引用
<ul><li><code>export default</code> 是<strong>对 <code>default</code> 赋值的特例，本质上是一种赋值</strong>（即 <code>export default</code> 后的语句会被视为表达式）所以拿到的是值而不是引用</li> <li><strong><code>export default function</code> 是特例，导出的是引用</strong></li> <li><code>export { thing as default }</code> 写法为引用导出</li></ul></li> <li>导入时除 <code>{} = await import()</code> 外均为引用</li></ul> <h6 id="如何保证导入都是引用"><a href="#如何保证导入都是引用" class="header-anchor">#</a> 如何保证导入都是引用？</h6> <ul><li>保证导入总是引用
<ul><li>尽量使用命名导入（使用除 <code>{} = await import()</code> 外的写法）</li> <li>注意命名导出的写法</li> <li>少用默认导出</li></ul></li> <li>做不到上面的要求时尽量把需要维持引用的变量使用 <code>Object</code> 封装，不要使用简单变量</li></ul> <blockquote><p>相关文章</p> <ul><li><a href="https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/204.%E7%B2%BE%E8%AF%BB%E3%80%8A%E9%BB%98%E8%AE%A4%E3%80%81%E5%91%BD%E5%90%8D%E5%AF%BC%E5%87%BA%E7%9A%84%E5%8C%BA%E5%88%AB%E3%80%8B.md" target="_blank" rel="noopener noreferrer">精读《默认、命名导出的区别》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://jakearchibald.com/2021/export-default-thing-vs-thing-as-default/" target="_blank" rel="noopener noreferrer"><code>export default thing</code> is different to <code>export { thing as default }</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></blockquote> <h3 id="export-与-import-的复合写法"><a href="#export-与-import-的复合写法" class="header-anchor">#</a> export 与 import 的复合写法</h3> <p>如果在一个模块之中，需要先输入后输出同一个模块，<code>import</code> 命令可以与 <code>export</code> 命令写在一起</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token punctuation">{</span> foo<span class="token punctuation">,</span> bar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'my_module'</span>
<span class="token comment">// 等同于</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> foo<span class="token punctuation">,</span> bar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'my_module'</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> foo<span class="token punctuation">,</span> bar <span class="token punctuation">}</span>

<span class="token comment">/* 接口改名 */</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> foo <span class="token keyword">as</span> myFoo <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'my_module'</span>

<span class="token comment">/* 整体输出 */</span>
<span class="token keyword">export</span> <span class="token operator">*</span> <span class="token keyword">from</span> <span class="token string">'my_module'</span>

<span class="token comment">/* 具名接口改为默认接口 */</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> es6 <span class="token keyword">as</span> <span class="token keyword">default</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'my_module'</span><span class="token punctuation">;</span>
<span class="token comment">// 等同于</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> es6 <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'my_module'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> es6<span class="token punctuation">;</span>

<span class="token comment">/* 默认接口改为具名接口 */</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> <span class="token keyword">default</span> <span class="token keyword">as</span> es6 <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'my_module'</span><span class="token punctuation">;</span>

<span class="token comment">/* 整体加载 */</span>
<span class="token keyword">export</span> <span class="token operator">*</span> <span class="token keyword">as</span> util <span class="token keyword">from</span> <span class="token string">&quot;util&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 等同于</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> util <span class="token keyword">from</span> <span class="token string">&quot;util&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span>util<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><p>注意点</p> <p>在 <code>export</code> 与 <code>import</code> 的复合写法时，输入的接口不能在当前模块中使用，只是相当于对外转发了接口</p> <h3 id="import"><a href="#import" class="header-anchor">#</a> import()</h3> <p><a href="https://github.com/tc39/proposal-dynamic-import" target="_blank" rel="noopener noreferrer">ES2020<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 引入 <code>import()</code> 函数支持动态加载模块</p> <ul><li><code>import()</code> 函数可以用在任何地方，不仅仅是模块非模块的脚本也可以使用</li> <li><code>import()</code> 函数是运行时执行</li> <li><code>import()</code> 函数与所加载的模块没有静态连接关系</li> <li><code>import()</code> 函数类似于 <code>Node.js</code> 中的 <code>require()</code> 函数，区别主要是前者是异步加载后者是同步加载</li> <li><code>import()</code> 函数的返回值是 <code>Promise</code> 对象</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./dialogBox.js'</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">dialogBox</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    dialogBox<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">/* Error handling */</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>import() 函数的使用场景</p> <ul><li>按需加载</li> <li>条件加载</li> <li>动态的模块路径</li></ul> <h3 id="浏览器对-esmodule-的加载规则"><a href="#浏览器对-esmodule-的加载规则" class="header-anchor">#</a> 浏览器对 ESModule 的加载规则 <a href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9-esmodule-%E7%9A%84%E5%8A%A0%E8%BD%BD%E8%A7%84%E5%88%99"></a></h3> <p>浏览器加载 <code>ESModule</code> 同样使用 <code>&lt;script&gt;</code> 标签但是需要设置 <code>type=&quot;module</code>&quot; 属性<br>
浏览器对于带有 <code>type=&quot;module&quot;</code> 的 <code>&lt;script&gt;</code>都是异步加载，不会堵塞浏览器，即等到整个页面渲染完再执行模块脚本，等同于设置了 <code>&lt;script&gt;</code> 标签的 <code>defer</code> 属性<br>
有多个 <code>&lt;script type=&quot;module&quot;&gt;</code> 时会按照在页面出现的顺序依次执行</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;module&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;./util.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 等同于 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;module&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;./util.js&quot;</span> defer<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>当 <code>&lt;script&gt;</code> 同时设置了 <code>type=&quot;module&quot;</code> 和 <code>async</code> 属性时，只要加载完成渲染引擎就会中断渲染立即执行，等执行完成后再恢复渲染，即不会按照在页面出现的顺序执行，而是只要该模块加载完成就执行该模块</p> <h4 id="在-script-中使用-esmodule"><a href="#在-script-中使用-esmodule" class="header-anchor">#</a> 在 script 中使用 ESModule</h4> <p><code>ESModule</code> 内嵌在网页中使用时语法行为与加载外部脚本完全一致，只需注意以下几点</p> <ul><li>代码是在模块作用域之中运行而不是在全局作用域运行，模块内部的顶层变量外部不可见</li> <li>自动采用严格模式不管有没有声明 <code>use strict</code></li> <li>可以使用 <code>import</code> 命令加载其他模块(<code>.js</code> 后缀不可省略，需要提供绝对 <code>URL</code> 或相对 <code>URL</code>) 也可以使用 <code>export</code> 命令输出对外接口</li> <li>顶层的 <code>this</code> 关键字返回 <code>undefined</code> 而不是指向 <code>window</code></li> <li>同一个模块如果加载多次将只执行一次</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;module&quot;</span><span class="token operator">&gt;</span>
  <span class="token keyword">import</span> $ <span class="token keyword">from</span> <span class="token string">'./jquery/src/jquery.js'</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#message'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">'Hi from jQuery!'</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>小技巧</p> <p>利用顶层的 <code>this</code> 等于 <code>undefined</code> 这个语法点可以判断当前代码是否在 ES6 模块之中</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> isNotModuleScript <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token operator">!==</span> <span class="token keyword">undefined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="promise"><a href="#promise" class="header-anchor">#</a> Promise</h2> <p><code>Promise</code> 是异步编程的一种解决方案，比传统的解决方案(回调函数和事件)更合理和更强大</p> <p><code>Promise</code> 对象具有以下 <code>3</code> 种状态</p> <ul><li><code>pending</code> 等待(初始)</li> <li><code>fulfilled</code> 成功</li> <li><code>rejected</code> 拒绝</li></ul> <p>Promise 的特点</p> <ul><li><code>Promise</code> 对象的状态不受外界影响</li> <li>状态一旦改变就不会再变(不可逆)，任何时候都可以得到这个结果</li> <li>无法取消 <code>Promise</code>，一旦新建就会立即执行无法中途取消</li> <li>当处于 <code>pending</code> 状态时，无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 基本用法 */</span>
<span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'成功'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">/* 链式调用 */</span>
<span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string">'/get/1'</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string">'/get/2'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string">'/get/3'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="promise-实例方法"><a href="#promise-实例方法" class="header-anchor">#</a> Promise 实例方法</h3> <ul><li><code>Promise.prototype.then()</code> 用于实例添加状态改变时的回调函数(第一个参数是 <code>fulfilled</code> 状态的回调函数，第二个参数是 <code>rejected</code> 状态的回调函数)，会返回的是一个新的 <code>Promise</code> 实例</li> <li><code>Promise.prototype.catch()</code> 用于指定 <code>rejected</code> 状态的回调函数(是 <code>.then(null, rejection)</code> 或 <code>.then(undefined, rejection)</code> 的别名)</li> <li><code>Promise.prototype.finally()</code> (ES2018) 用于指定不管 <code>Promise</code> 对象最后状态如何都会执行的操作 (<code>finally</code> 本质上是 <code>then</code> 方法的特例)</li></ul> <p>js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/*  实现 finally 方法 */</span>
<span class="token class-name">Promise</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">finally</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token constant">P</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>constructor
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
    <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">P</span><span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> value<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">(</span><span class="token parameter">reason</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
      <span class="token constant">P</span><span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">throw</span> reason
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="promise-静态方法"><a href="#promise-静态方法" class="header-anchor">#</a> Promise 静态方法</h3> <ul><li><code>Promise.resolve()</code> <ul><li>将传入的参数转为 <code>Promise</code> 对象
<ul><li>参数是一个 <code>Promise</code> 实例则直接返回</li> <li>参数是一个 <code>thenable</code> 对象(具有 <code>then</code> 方法的对象) 转为 <code>Promise</code> 对象再立即执行 <code>thenable</code> 对象的 <code>then</code> 方法</li> <li>参数不是具有 <code>then</code> 方法的对象或根本就不是对象时返回一个 <code>fulfilled</code> 状态的新 <code>Promise</code> 对象</li> <li>没有参数时返回一个 <code>fulfilled</code> 状态的新 <code>Promise</code> 对象</li></ul></li></ul></li> <li><code>Promise.reject()</code> <ul><li>返回一个 <code>rejected</code> 状态的新 <code>Promise</code> 对象</li></ul></li> <li><code>Promise.all()</code> <ul><li>将多个 <code>Promise</code> 实例，包装成一个新的 <code>Promise</code> 实例，只有所有的 <code>Promise</code> 状态成功才会成功，如果其中一个 <code>Promise</code> 的状态失败就会失败</li></ul></li> <li><code>Promise.race()</code> <ul><li>将多个 <code>Promise</code> 实例，包装成一个新的 <code>Promise</code> 实例，新的 <code>Promise</code> 实例状态会根据最先更改状态的参数实例而更改状态(可以轻松实现超时方法)</li></ul></li> <li><code>Promise.allSettled()</code> (ES2020)
<ul><li>将多个 <code>Promise</code> 实例，包装成一个新的 <code>Promise</code> 实例，新的 <code>Promise</code> 实例只有等到所有这些参数实例都返回结果，不管是 <code>fulfilled</code> 还是 <code>rejected</code> ，包装实例才会结束，一旦结束，状态总是 <code>fulfilled</code></li></ul></li> <li><code>Promise.any()</code> (ES2021)
<ul><li>将多个 <code>Promise</code> 实例，包装成一个新的 <code>Promise</code> 实例，只要参数实例有一个变成 <code>fulfilled</code> 状态，包装实例就会变成 <code>fulfilled</code> 状态；如果所有参数实例都变成 <code>rejected</code> 状态，包装实例才会变成 <code>rejected</code> 状态</li></ul></li></ul> <p><a href="https://github.com/maomao1996/Promise" target="_blank" rel="noopener noreferrer">Promise 实现<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 简易实现、A+ 规范实现、原型方法、静态方法实现</p></div> <footer class="page-edit" style="display:none;"><!----> <!----></footer> <!----> <!----></main> <!----> <div class="comments-wrapper" data-v-4698c43e><!----></div></div></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-44bd5a18 data-v-44bd5a18><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-44bd5a18><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-44bd5a18></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-44bd5a18></path></svg></div><div></div><!----><canvas id="vuepress-canvas-cursor"></canvas><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://music.163.com/song/media/outer/url?id=115162.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:200px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p2.music.126.net/2oouVh_rHOv1nZXYapF41A==/109951163606358209.jpg" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p2.music.126.net/2oouVh_rHOv1nZXYapF41A==/109951163606358209.jpg);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>月半小夜曲</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>李克勤</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div><div class="Sakura" data-v-248d85d6><canvas id="canvas_sakura" style="z-index:-1;" data-v-248d85d6></canvas></div><canvas id="Ribbon"></canvas><div class="RibbonAnimation"></div></div></div>
    <script src="/xiaoliantongxue/assets/js/app.ebd9f252.js" defer></script><script src="/xiaoliantongxue/assets/js/4.d19b4706.js" defer></script><script src="/xiaoliantongxue/assets/js/1.7b0744f8.js" defer></script><script src="/xiaoliantongxue/assets/js/18.0721048c.js" defer></script>
  </body>
</html>
